<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title th:text="#{regpage.title}"></title>
        <meta name="description" content="" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
        
        <!--[if lte IE 9]><link rel="stylesheet" href="css/ie.css" type="text/css" media="screen" /><![endif]-->

		<link rel="stylesheet" href="css/css.css" th:href="@{/css/min.css}"/>            
        <script src="http://lib.sinaapp.com/js/jquery/1.9.0/jquery.min.js" th:src="@{http://lib.sinaapp.com/js/jquery/1.9.0/jquery.min.js}"></script>
        <script th:inline="javascript">/*<![CDATA[*/
        window.jQuery || document.write('<script src="'+ /*[[@{/js/vendor/jquery-1.9.0.min.js}]]*/ 'js/vendor/jquery-1.9.0.min.js'
        		+'"><\/script>')
        /*]]>*/</script>
        <script type="text/javascript" th:src="@{/js/econgen.js}"></script>
        <script type="text/javascript" th:inline="javascript">/*<![CDATA[*/
        function checkColumns(){
        	var hasError = false;
        	var err = $('.error-msg').html('');
        	
        	if($('#firstName').val() == ''){
        		addErr(/*[[#{regpage.js.firstname.blank}]]*/''
        			);
        		hasError = true;
        	}
        	if($('#lastName').val() == ''){
        		addErr(/*[[#{regpage.js.lastname.blank}]]*/''
        			);
        		hasError = true;
        	}
        	var username = $('#username').val();
        	if(username == ''){
        		addErr(/*[[#{regpage.js.username.blank}]]*/''
        			);
        		hasError = true;
        	}
        	if(!/^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){4,19}$/.test(username)){
        		addErr(/*[[#{regpage.js.username.notvalid}]]*/''
        			);
        		hasError = true;
        	}
        	var email = $('#email').val();
        	if(email == ''){
        		addErr(/*[[#{regpage.js.email.blank}]]*/''
        			);
        		hasError = true;
        	}
        	if(!/^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/.test(email)){
        		addErr(/*[[#{regpage.js.email.notvalid}]]*/''
        			);
        		hasError = true;
        	}
        	var pw = $('#password').val();
        	if(pw == ''){
        		addErr(/*[[#{regpage.js.password.blank}]]*/''
        			);
        		hasError = true;
        	}
        	var cpw = $('#confirmPassword').val();
        	if(cpw == ''){
        		addErr(/*[[#{regpage.js.confirmpassword.blank}]]*/''
        			);
        		hasError = true;
        	}
        	if(cpw !== pw){
        		addErr(/*[[#{regpage.js.confirmpassword.valid}]]*/''
        			);
        		hasError = true;
        	}
        	var cq = $('#securityQuestion').val();
        	if(cq == ''){
        		addErr(/*[[#{regpage.js.securityquestion.blank}]]*/''
        			);
        		hasError = true;
        	}
        	var ca = $('#securityAnswer').val();
        	if(ca == ''){
        		addErr(/*[[#{regpage.js.securityanswer.blank}]]*/''
        			);
        		hasError = true;
        	}
        	
        	if(hasError){
        		err.show();
        	}
        	return !hasError;
        }
        function addErr(errMsg){
        	$('.error-msg').append('<div>' + errMsg + '</div>');
        }
        var x = /*[[${errMsg}]]*/null;
        if(x == 'password_not_same'){
        	alert(/*[[#{password_inconsistent_tip}]]*/''
        			);
        }else
        if(x == 'person_exist'){
        	alert(/*[[#{user_info_exist_tip}]]*/''
        			);
        }
        /*]]>*/</script>
    </head>
    <body>
        <header th:substituteby="common/template::header"></header>
        
        <div class="container">
        	<div class="row">
        		<div class="eightcol">
        			<h1 th:text="#{regpage.header}"></h1>
       				<div class="threecol top-border">
       					<h4 th:text="#{regpage.header.help.title}"></h4>
       					<ul class="helper">
       						<li>
       							<a href="#" th:text="#{regpage.header.help.content}" th:href="@{/c/a/regHelp}"></a>
       						</li>
       					</ul>
       				</div>
       				<div class="ninecol last top-border">
       					<h3 th:text="#{regpage.reg.title}"></h3>
       					<div class="error-msg hide"></div>
       					<div class="" th:text="#{regpage.reg.tip}"></div>
       					<div class="form-reg">
       					<form method="post">
       						<ul class="top-border-dot">
       							<li class="sixcol">
       								<label><strong th:text="#{regpage.reg.firstname}"></strong><span class="required">*</span></label>
       								<input name="firstName" id="firstName" th:value="${p}?${p.firstName}"/>
       							</li>
       							<li class="sixcol last">
       								<label><strong th:text="#{regpage.reg.lastname}"></strong><span class="required">*</span></label>
       								<input name="lastName" id="lastName" th:value="${p}?${p.lastName}"/>
       							</li>
       							<li class="sixcol">
       								<label><strong th:text="#{regpage.reg.username}"></strong><span class="required">*</span></label>
       								<input name="username" id="username" th:value="${p}?${p.username}"/>
       							</li>
       							<li class="sixcol last">
       								<label><strong th:text="#{regpage.reg.email}"></strong><span class="required">*</span></label>
       								<input name="email" id="email" th:value="${p}?${p.email}"/>
       							</li>
       							<li class="twelvecol">
       								<span th:text="#{regpage.reg.password.tip}"></span>
       							</li>
       							<li class="sixcol">
       								<label><strong th:text="#{regpage.reg.password}"></strong><span class="required">*</span></label>
       								<input type="password" name="password" id="password"/>
       							</li>
       							<li class="sixcol last">
       								<label><strong th:text="#{regpage.reg.confirmpassword}"></strong><span class="required">*</span></label>
       								<input type="password" name="confirmPassword" id="confirmPassword"/>
       							</li>
       							<li class="twelvecol">
       								<span th:text="#{regpage.reg.security.tip}"></span>
       							</li>
       							<li class="sixcol">
       								<label><strong th:text="#{regpage.reg.securityquestion}"></strong><span class="required">*</span></label>
       								<input name="securityQuestion" id="securityQuestion" th:value="${p}?${p.securityQuestion}"/>
       							</li>
       							<li class="sixcol last">
       								<label><strong th:text="#{regpage.reg.securityanswer}"></strong><span class="required">*</span></label>
       								<input name="securityAnswer" id="securityAnswer"/>
       							</li>
       							<li class="twelvecol">
       								<label><input type="checkbox" class="onecol"/><span th:text="#{regpage.reg.notifyinfo}"></span></label>
       								<span th:text="#{regpage.reg.agreement}"></span>
       							</li>
       							<li class="twelvecol">
       								<hr/>
       								<button class="form-btn" type="submit" onclick="return checkColumns()" th:text="#{regpage.reg.reg}"></button>
       								<div class="onecol-seprator"></div>
       								<button class="form-btn" type="reset" th:text="#{regpage.reg.reset}"></button>
       								<hr/>
       							</li>
       						</ul>
       					</form>
       					</div>
       				</div>
        		</div>
        		<div class="fourcol last">
        			<h2 th:text="#{regpage.login.title}"></h2>
        			<a href="login.html" th:href="@{/login.html}" class="form-btn" th:text="#{regpage.login.login}"></a>
        		</div>
        	</div>
        </div>

        <footer th:substituteby="common/template::footer"></footer>
        
    </body>
</html>
